<template>
    <div class="contract_form">
        <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            label-width="100px"
            :size="'default'"
            status-icon
        >
            <el-row :gutter="2">
                <el-col :span="6">
                    <el-form-item label="客户" prop="client_cod">
                        <el-select
                            v-model="formData.client_cod"
                            filterable
                            placeholder="Select"
                            :clearable="true"
                        >
                            <el-option
                                v-for="optValue in client"
                                :key="optValue.value"
                                :label="optValue.label"
                                :value="optValue.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="提单号" prop="bill_no">
                        <el-input v-model.trim="formData.bill_no" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="委托类型" prop="contract_kind">
                        <el-select
                            v-model="formData.contract_kind"
                            filterable
                            placeholder="Select"
                            :clearable="true"
                        >
                            <el-option
                                v-for="optValue in contractKind"
                                :key="optValue.value"
                                :label="optValue.label"
                                :value="optValue.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="站点" prop="cfs_id">
                        <el-select
                            v-model="formData.cfs_id"
                            filterable
                            placeholder="Select"
                            :clearable="true"
                        >
                            <el-option
                                v-for="optValue in cyCfs"
                                :key="optValue.value"
                                :label="optValue.label"
                                :value="optValue.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="2">
                
            </el-row>
        </el-form>
    </div>
    <div>
        <el-tabs type="border-card" class="demo-tabs" v-model="activeTabName">
            <el-tab-pane label="箱信息" name="cntrs">
                <ContractCntrs
                    ref="childCntrsRef"
                    v-model:table-data="cntrsArray"
                    v-model:contract-cntr-sum-id="cntrsumCurId"
                >
                </ContractCntrs>
            </el-tab-pane>
            <el-tab-pane label="运输" name="trans_path">
                <ContractTrans
                    ref="childTransRef"
                    v-model:contract-id="formData.id"
                    v-model:table-data="formData.trans"
                >
                </ContractTrans>
            </el-tab-pane>
            <el-tab-pane label="费用" name="feedet">
                <ContractFeedets
                    ref="childFeedetsRef"
                    v-model:contract-id="formData.id"
                    v-model:table-data="formData.feedets"
                >
                </ContractFeedets>
            </el-tab-pane>
        </el-tabs>
    </div>
    <div class="btn-group">
        <el-button-group>
            <el-button
                class="btn"
                type="primary"
                v-debounce="submitForm"
                size="large"
            >
                委托保存
            </el-button>
            <el-button
                class="btn"
                type="primary"
                v-debounce="submitAndNewForm"
                size="large"
            >
                委托保存并新增
            </el-button>
        </el-button-group>
    </div>
</template>
<script setup lang="ts" name="Contract">
import { ContractCntrModel, ContractModel } from '@/common/types/transpost';
import { useAppStore } from '@/store/app';
import { FormInstance, FormRules } from 'element-plus';
import { storeToRefs } from 'pinia';
import { ref, reactive, onMounted } from 'vue';
import { Request } from '@/app/request';
import { initObjectProperty } from '@/common/tools';

import ContractCntrs from './ContractCntrs.vue';

import ContractFeedets from './ContractFeedets.vue';
import { ValidateFieldsError } from 'async-validator';
import { omit } from 'lodash';
const activeTabName = ref('cntrs');
const props = defineProps<{
    contract_id?: number;
}>();
const emit = defineEmits<{
    create: [action: ContractModel];
    update: [action: ContractModel];
    close: [];
}>();
const formRef = ref<FormInstance>();

const childCntrsRef = ref<InstanceType<typeof ContractCntrs>>();
const childFeedetsRef = ref<InstanceType<typeof ContractFeedets>>();
const formData = ref<ContractModel>({});

const cntrsArray = ref<Array<ContractCntrModel>>([]);
const cntrsumCurId = ref<number | undefined>();
const { client, contractKind, cyCfs } = storeToRefs(useAppStore());
const rules = reactive<FormRules>({
    client_cod: [{ required: true, message: '请选择客户', trigger: 'blur' }],
    contract_kind: [
        { required: true, message: '请选择委托类型', trigger: 'blur' },
    ],
    bill_no: [{ required: true, message: '提单号不能空', trigger: 'blur' }],
});
/* const onClickSumTable = async (data: ContractCntrSumModel) => {
    cntrsumCurId.value = data.id;
    const req = new Request('委托箱号查询', {
        where: {
            contract_cntr_sum_id: {
                equals: data.id,
            },
        },
    });
    const r = await req.post();

    if (r.obj) {
        cntrsArray.value.length = 0;
        cntrsArray.value = r.obj;
    }
}; */
const save = async () => {
    const formValid = await formRef.value?.validate(
        (isValid: boolean, _invalidFields?: ValidateFieldsError) => {
            // return isValid;
        },
    );
    if (formValid) {
        if ((formData.value.id ?? 0) > 0) {
            // 修改
            const req = new Request(
                '委托头修改',
                omit(formData.value, ['cntrsum', 'trans', 'feedets']),
            );
            const r = await req.post();
            if (r.code > 100) {
                emit('update', r.obj);
            }
        } else {
            // 新增
            const req = new Request(
                '委托头增加',
                omit(formData.value, ['cntrs', 'trans', 'feedets']),
            );
            const r = await req.post();
            if (r.code > 100) {
                formData.value = r.obj;
                formData.value.cntrs = [];
                formData.value.trans = [];
                formData.value.feedets = [];
                emit('create', r.obj);
            }
        }
        return true;
    } else {
        return false;
    }
};
const submitForm = async () => {
    const r = await save();
    /* if (r) {
        emit('close');
    } */
};

const submitAndNewForm = async () => {
    const r = await save();
    if (r) {
        formRef.value?.resetFields();
        initObjectProperty(formData.value);
        formData.value.cntrs = [];
        formData.value.trans = [];
        formData.value.feedets = [];
    }
};

onMounted(async () => {
    if (props.contract_id) {
        const req = new Request('委托查询', {
            contract_id: props.contract_id,
        });
        const r = await req.post();

        if (r.obj) {
            formData.value = r.obj;
        }
    } else {
        initObjectProperty(formData.value);
        formData.value.cntrs = [];
        formData.value.trans = [];
        formData.value.feedets = [];
    }
});
</script>
<style lang="scss" scoped>
.demo-tabs {
    margin-bottom: 10px;
}
.demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
.main-content {
    padding-top: 0;
}
.btn-group {
    .btn {
        margin-right: 5px;
    }
}
</style>
